<template>
  <div id="home">
    <nav-bar class='homeNav'><div slot="center">nice市街</div></nav-bar>
    <swipe :list='swipeList'></swipe>
    <recommend :recommends='recommendList'/>
    <tab-control :titles='tabControl' class="tabc" @tabClick='tabClick'/>
    <goods-list :goods="goods[currentType].list"/>

  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'
import Swipe from '@/components/common/swipe/Swipe'

import Recommend from '@/components/content/recommend/Recommend'
import TabControl from '@/components/content/tabcontrol/TabControl'
import GoodsList from '@/components/content/goods/GoodsList'

import {request} from '@/network/request'
export default {
  name: 'Home',
  components: {
    NavBar,
    Swipe,
    Recommend,
    TabControl,
    GoodsList
  },
  data(){
    return{
      swipeList:[],
      recommendList:[],
      tabControl:['流行','新款','精选'],
      goods:{
        'pop':{
          QueryParams:{
                    query:'热',
                    cid:'',
                    pagenum:1,
                    pagesize:10
          },
          list:[]
          },
        'new':{
          QueryParams:{
                    query:'饰品',
                    cid:'',
                    pagenum:1,
                    pagesize:10
          },
          list:[]
          },
        'sell':{
          QueryParams:{
                    query:'冲锋衣',
                    cid:'',
                    pagenum:1,
                    pagesize:10
          },
          list:[]
          }
      },
      currentType:'pop'
      
    }
  },
  created(){
    this.getMultidata();
    this.getGoods('pop');
    this.getGoods('new');
    this.getGoods('sell');
  },
  methods:{
    getMultidata(){
        request({
          url:'http://123.207.32.32:8000/home/multidata'
        })
        .then(res => {
          // console.log(res.data.data);
          this.swipeList = res.data.data.banner.list
          this.recommendList = res.data.data.recommend.list
        })
    },
    getGoods(type){
      request({
      url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
			params:this.goods[type].QueryParams
    })
    .then(res => {
      // console.log(res.data.message.goods);
      this.goods[type].list.push(...res.data.message.goods)
    })
    },

    tabClick(index){
      // console.log(index);
      switch(index){
          case 0:
            this.currentType='pop';
            window.removeEventListener('scroll',this.scrollFn);
            setTimeout(()=>{
              window.addEventListener('scroll',this.scrollFn);
            },500)
            break;
          case 1:
            this.currentType='new';
            window.removeEventListener('scroll',this.scrollFn);
            setTimeout(()=>{
              window.addEventListener('scroll',this.scrollFn);
            },500)
            break;
          case 2:
            this.currentType='sell';
            window.removeEventListener('scroll',this.scrollFn);
            setTimeout(()=>{
              window.addEventListener('scroll',this.scrollFn);
            },500)
            break;
      }
    },

    scrollFn(){
        //滚动高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //窗口高度
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //文档高度
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        if(scrollTop+clientHeight>=scrollHeight){
          console.log("触底了");
          this.goods[this.currentType].QueryParams.pagenum++;
          console.log(this.goods[this.currentType].QueryParams.pagenum);
          this.getGoods(this.currentType)
          console.log(this.goods);
        }
    }
  },
  mounted(){
    window.addEventListener('scroll',this.scrollFn);
  }
}
</script>
<style lang='scss' scoped>
#home{
  padding-top: 44px;
}
.homeNav{
  background-color: rgb(217, 90, 126);
  color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.tabc{
  position: sticky;
  top: 44px;
  z-index: 9;
}

</style>